[iOS 9] UIStackViewでAndroidのView.GONEを実装する

[iOS 9] UIStackViewでAndroidのView.GONEを実装する

Clock Icon2015.10.26

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

こんにちは!加藤潤です。

これまでこちらにあるように条件によって特定のビューの表示/非表示を切り替える場合、 非表示にした場合にその分のスペースを詰めたり、逆に表示した場合にスペースを空ける等の処理はConstraintを2つ用意して差し替えたり、少々トリッキーなやり方でやっていました。 Android Developerの方は「View.GONEがあれば。。。」と思ったに違いありません。

しかしiOS 9で追加されたUIStackViewを使えばViewのhiddenを切り替えるだけでView.GONEの動きが出来ちゃいます。今回はその方法をご紹介します。

開発環境

開発環境は以下の通りです。

  • Xcode 7.0.1
  • iPhone 6sシミュレータ

ビューの配置 & 制約の追加

今回はUISwitchと2つのUITextViewを配置し、UISwitchのON/OFFで先頭のUITextViewの表示/非表示を切り替えます。

まずはStoryboard上で下記のようにUISwitchと2つのUITextViewを貼り付けます。 わかりやすいようにUITextViewには背景色、テキストを設定します。

この時点でUISwitchに以下の制約を追加します。

  • Leading Space to: Superview
  • TopSpace to: Top Layout Guide Equals: 20

ios-9-uistackview-view-hidden_001

続いて2つのUITextViewをUIStackViewで包みましょう。 下記のように2つのUITextViewを選択した状態で「Stack」をクリックします。

ios-9-uistackview-view-hidden_002

すると下記のように選択したUITextViewがUIStackViewで包まれます。

ios-9-uistackview-view-hidden_003

この状態だとAutolayoutの制約が不足しているのでエラーとなります。 下記の制約を追加してください。

  • 1番目のUITextViewにHeight Equals: 100を設定
  • 2番目のUITextViewにHeight Equals: 200を設定
  • UIStackViewにTrailing Space to Superviewを設定
  • UIStackViewにLeading Space to Superviewを設定
  • UIStackViewにTop Space to: Switch Equals 20を設定

最終的に制約は下記のようになります。 ios-9-uistackview-view-hidden_004

コーディング

ここまででビューを配置して制約の設定が終わったので後はコーディングするだけです。 とは言っても簡単で、下記のように1番目のUITextViewのアウトレットとUISwitchの値変更アクションメソッドを実装します。 アクションメソッドの中で1番目のUITextViewのhiddenを切り替えるだけです。

class ViewController: UIViewController {
    
    // 1番目のテキストビュー
    @IBOutlet weak var firstTextView: UITextView!
    
    // UISwitchの変更イベント
    @IBAction func didChangeValue(sender: UISwitch) {
        UIView.animateWithDuration(0.3) { () -> Void in
            self.firstTextView.hidden = !sender.on
        }
    }
}

動作確認

実行結果は下記の通りです。

ios-9-uistackview-view-hidden

まとめ

UIStackViewを使って簡単にAndroidのView.GONEを実装する方法をご紹介しました。 今回ご紹介した内容はUIStackViewを使った例の1つに過ぎません。 iOS 9から追加されたUIStackViewをどんどん活用していきましょう!!

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.